import React, { useEffect, useState, useCallback } from 'react';
import styles from './resultSvg.less';

export default function (props:any) {
  return <svg 
    className={`${styles.animation} ${props.className || ''}`}
    xmlns="http://www.w3.org/2000/svg"
    width="130"
    height="130"
    viewBox="0 0 130 130"
  >
    <circle
      className={props.status === 'success' ? styles.successAnimationCircle : styles.errorAnimationCircle}
      cx="65"
      cy="65"
      r="60"
      fill="transparent"
      strokeWidth="5">
    </circle>
    {props.status === 'success' && <polyline className={styles.successAnimationCheck} points="33.67 64.71 54.75 85.79 96.33 44.21" fill="transparent" strokeWidth="5"></polyline>}
    {props.status === 'fail' && <line className={styles.errorAnimationCross} x1="42.83" y1="42.34" x2="89.83" y2="89.67" fill="transparent" strokeWidth="5"></line>}
    {props.status === 'fail' && <line className={styles.errorAnimationCross} x1="89.83" y1="42.34" x2="42.83" y2="89.67" fill="transparent" strokeWidth="5"></line>}
  </svg>
}